<template>
  <div class="common_header">
    <div class="left_block">
      <img src="@/assets/images/ic_meau@2x.png" class="ic_menu" @click="openColum" />
      <img src="@/assets/images/logo@2x.png" class="logo_img" @click="goHome" />
    </div>
    <div class="right_block">
      <div class="diamonds" @click="goDiamondsPage">
        <img src="@/assets/images/ic_star_24@2x.png" />
        <span class="num">{{ balance }}</span>
      </div>
      <div class="personCenter" @click="goPersonCenter">
        <img src="@/assets/images/ic_me_1@2x.png" v-if="!authStore.isrealLogin" />
        <img src="@/assets/images/ic_me_2@2x.png" v-else />
      </div>
      <div class="login-img" @click="goLogin" v-if="!authStore.isrealLogin">
        <img src="@/assets/images/ic_login@2x.png" />
        <div class="login_status">Login</div>
      </div>
      <!-- <div class="login-img" @click="logout" v-else>
        <img src="@/assets/images/ic_login@2x.png" />
        <div class="login_status">Logout</div>
      </div> -->
    </div>
  </div>
  <!-- 栏目 -->
  <ColumPop @close="closePop" :balance="balance" :show="showColum" />
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import ColumPop from "@/components/ColumPop.vue";
import { useAuthStore } from "@/stores/authStore";
import { showConfirmDialog } from "vant";

defineProps({
  balance: {
    type: String,
    required: true,
  },
});

const authStore = useAuthStore();

const goLogin = () => {
  authStore.showLoginDialog(); // 触发登录弹窗
  authStore.isLogin = true
};

const router = useRouter();
const goDiamondsPage = () => {
  router.push("./myDiamonds");
};

const goPersonCenter = () => {
  router.push("./me");
};

const goHome = () => {
  router.push("/");
};

const logout = async () => {
  showConfirmDialog({
    confirmButtonText: "Log out",
    className: "custom-delete-dialog",
    cancelButtonText: "Cancel",
    message: "Are you sure you want to log out?",
  })
    .then(() => {
      authStore.logout();
    })
    .catch(() => {
      // on cancel
    });
};

const showColum = ref(false);
const openColum = () => {
  showColum.value = true;
};
const closePop = () => {
  showColum.value = false;
};
</script>

<style scoped lang="less">
.common_header {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  line-height: 56px;
  /* 背景图设置 */
  background-image: url("../assets/images/bg_texture@2x.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 99;
  background-color: #fff;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;

  .left_block {
    display: flex;
    justify-content: left;
    align-items: center;

    .ic_menu {
      width: 32px;
    }

    .logo_img {
      width: 96px;
      margin-left: 13px;
    }
  }

  .right_block {
    display: flex;
    justify-content: left;
    align-items: center;

    .diamonds {
      display: flex;
      justify-items: center;
      align-items: center;

      .num {
        font-size: 18px;
        color: rgba(0, 0, 0, 0.95);
        margin-left: 2px;
      }

      img {
        width: 24px;
      }
    }

    .login-img {
      // width: 77px;
      height: 38px;
      padding: 0 10px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(0, 0, 0, 0.45);
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 13px;

      img {
        width: 16px;
        margin-right: 8px;
      }

      .login_status {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.95);
      }
    }

    .personCenter {
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 5px;

      img {
        width: 100%;
      }
    }
  }
}
</style>
